<template>
	<view class="">
		<view style="display: flex;">
			<view class="user-image">
				<u-avatar size="80" src="http://love.q05.cc/10347557ca50b461948021c571afafd1.png"></u-avatar>
			</view>
			<view style="flex: 1;">
				<view class="user-card">
					<view class="user-name">
						<text>李漂亮</text>
					</view>
					<view class="user-time">
						<text>12月12日 18:14 所有人可见</text>
					</view>
					<view class="user-label">
						<text>#减肥计划</text>
					</view>
					<view class="user-content">
						今日减肥计划已打卡成功
					</view>
				</view>
			</view>
		</view>
		<view style="display: flex;margin-top: 43rpx;">
			<view class="user-image">
				<u-avatar size="80" src="http://love.q05.cc/10347557ca50b461948021c571afafd1.png"></u-avatar>
			</view>
			<view style="flex: 1;">
				<view class="user-card">
					<view class="user-name">
						<text>李漂亮</text>
					</view>
					<view class="user-time">
						<text>12月13日 18:14 所有人可见</text>
					</view>
					<view class="user-label">
						<text>#减肥计划</text>
					</view>
					<view class="user-content">
						今日减肥计划已打卡成功
					</view>
				</view>
			</view>
		</view>
		<view style="display: flex;margin-top: 43rpx;">
			
			<view style="flex: 1;">
				<view class="user-card" style="position: relative;margin-left: 0;margin-right: 14rpx;">
					<view class="user-name user-right">
						<text>Jenny</text>
					</view>
					<view class="user-time user-right">
						<text>12月12日 18:30 所有人可见</text>
					</view>
					<view class="user-label user-right">
						<text>#减肥计划</text>
					</view>
					<view class="user-content user-right">
						今日减肥计划已打卡成功
					</view>
					<view style="position: absolute;left: 30rpx;top: 10rpx;">
						
						<u-icon name="more-dot-fill" color="rgba(0,0,0,0.60);" size="28"></u-icon>
					</view>
				</view>
			</view>
			<view class="user-image">
				<u-avatar size="80" src="http://47.110.134.12:8080/reminder/img/QQ图片20210508235927.png"></u-avatar>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"community-message",
		data() {
			return {
				
			};
		}

	}
</script>

<style lang="scss">
	page{
		// background-color: #f8f7ff;
	}
	.user-image{
		
	}
	.user-card{
		padding: 22rpx 29rpx;
		font-weight: 500;
		background-color: #fff;
		border-radius: 14rpx;
		box-shadow: 0rpx 2rpx 9rpx 3rpx rgba(176,176,176,0.25); 
		margin-left: 14rpx;
		.user-name{
			font-size: 29rpx;
		}
		.user-time{
			font-size: 22rpx;
			color: rgba(0,0,0,0.60);
		}
		.user-label{
			font-size: 24rpx;
			margin: 12rpx 0;
		}
		.user-content{
			font-size: 24rpx;
		}
		.user-right{
			text-align: end;
		}
	}
</style>
